import styles from "./index.less";
import React, { useEffect, useState ,useRef} from "react";
import { toplist, lblists, artistlists } from "@/api";
import moment from "moment";
import LoadingPage from '@/components/loadingPage'
import MyImg from '@/components/myimg'

const Leaderboard: React.FC = () => {
  const [arrToplist, setArrToplist] = useState([]);
  const [artistToplist, setArtistToplist] = useState<any>({});
  const [lbLists, setLbLists] = useState<any[]>([]);
  const [artistLists, setArtistLists] = useState([]);
  const [isLoading,setIsLoading] = useState(true)
  const pageRef=useRef<any>(null)
  useEffect(() => {
    toplist().then((res) => {
      setArrToplist(res?.list);
      setArtistToplist(res.artistToplist);
      console.log('res.list artistToplist',res)
      Promise.all(
        //获取飙升、新歌、原创、热歌榜对应的前五名
        res.list.slice(0, 4).map((item: any) =>
          lblists({
            id: item.id,
            limit: 5
          })
       )
        //获取歌手榜的前五名
      ).then((resIn) => {
        setLbLists(resIn);
        console.log('setLbLists',resIn)
      });
    });
    artistlists().then((res) => {
      setArtistLists(res.list.artists.slice(0, 5));
      console.log('setArtistLists',res.list.artists.slice(0, 5))
    });
    // console.log(pageRef.onload);
    
  }, []);
  return (
    <div 
    className={styles["onepage"]} 
    ref={pageRef}
    onLoad={ele=>{
      setIsLoading(false)
      // console.log(ele)
    }}>
    {/*标签中onload是否需要移除 */}
    <LoadingPage isLoading={isLoading}/>
      <h1 className={styles["tit-le"]}>官方榜</h1>
      <div className={styles["toppage"]}>
        {arrToplist.slice(0, 4).map((item: any, index) => (
          <div 
          className={styles["bigleaderboard"]}
          key={`arrToplist${item?.id||'index'+index}`}
          >
            <div
            className={styles['big-left']}
            >
              <MyImg 
              src={item.coverImgUrl}
              imgSize={{width:170}}/>
              {/* 更新时间 */}
              <span>{moment(item.updateTime).format("M月D日")}更新</span>
            </div>
            <div
            className={styles['big-right']}
            >
              {lbLists[index]?.playlist?.tracks
                ?.slice(0, 5)
                .map((itemIn: any, indexIn: any) => (
                  <p
                  key={`lbLists${itemIn?.id||'index'+indexIn}`}
                  >
                    <span className={styles["span1"]}>{indexIn + 1}</span>
                    <span className={styles["span2"]}>&darr;</span>
                    <span className={styles["span3"]}>{itemIn?.name}</span>
                    <span className={styles["span4"]}>{itemIn?.ar[0]?.name}</span>
                  </p>
                ))}
              <a >查看全部</a>
            </div>
          </div>
        ))}
        {/* ************歌手榜*********************/}
        <div className={styles["bigleaderboard"]}>
          <div 
            className={styles['big-left']}
          >
            <MyImg
            src={artistToplist.coverUrl}
            imgSize={{width:170}}
            />
            <span>{moment(artistToplist.updateTime).format("M月D日")}更新</span>
          </div>
          <div
            className={styles['big-right']}
          >
            {artistLists?.map((item: any, indexIn: any) => (
              <p 
              key={`artistLists${item?.id || 'index'+indexIn}`}
              >
                <span className={styles["span1"]}>{indexIn + 1}</span>
                <span className={styles["span2"]}>上升</span>
                <span className={styles["span3"]}>{item.name}</span>
              </p>
            ))}
            <a >查看全部</a>
          </div>
        </div>
      </div>
      <h1 className={styles["tit-le"]}>全球榜</h1>
      <div className={styles["bottompage"]}>
        {arrToplist.slice(4, arrToplist.length).map((item: any) => (
          <div 
          className={styles["smaleaderboard"]}
          key={`arrToplist${item?.id}`}
          >
            <div  className={styles["a-img"]}>
              <MyImg
              src={item.coverImgUrl}
              imgSize={{width:133}}/>
              <span className={styles["span1"]}>
                {item.playCount > 10000
                  ? Math.round(item.playCount / 10000) + "万"
                  : item.playCount}
              </span>
            </div>
            <br />
            <a  className={styles["name"]}>
              {item.name}
            </a>
          </div>
        ))}
      </div>
    </div>
  );
};
export default Leaderboard;
